import { Avatar, Icon, Menu, Spin } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentName: '',
    };
  }
  componentDidMount() {
    this.initialUser();
  }
  initialUser = () => {
    const userName = localStorage.getItem('currentName');
    if (userName) {
      this.setState({
        currentName: userName,
      });
    } else {
      window.location.assign('/user/login');
    }
  };
  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      // if (dispatch) {
      //   dispatch({
      //     type: 'login/logout',
      //   });
      // }
      localStorage.removeItem('currentName');
      localStorage.removeItem('id');
      localStorage.removeItem('token');
      this.setState(
        {
          currentName: '',
        },
        () => {
          this.initialUser();
        },
      );
      return;
    }

    router.push(`/account/${key}`);
  };

  render() {
    const {
      currentUser = {
        name: '',
      },
      menu,
    } = this.props;
    const { currentName } = this.state;

    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );

    // return currentUser && currentUser.name ? (
    //   <HeaderDropdown overlay={menuHeaderDropdown}>
    //     <span className={`${styles.action} ${styles.account}`}>
    //       <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
    //       {/** <span className={styles.name}>{currentUser.name}</span> */}
    //       <span className={styles.name}>{userName}</span>
    //     </span>
    //   </HeaderDropdown>
    // ) : (
    //   <Spin
    //     size="small"
    //     style={{
    //       marginLeft: 8,
    //       marginRight: 8,
    //     }}
    //   />
    // );
    return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            className={styles.avatar}
            src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
            alt="avatar"
          />
          {/** <span className={styles.name}>{currentUser.name}</span> */}
          <span className={styles.name}>{currentName}</span>
        </span>
      </HeaderDropdown>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
